<template>
  <!-- 工作质检 -->
  <div>
    <Card>
      <el-form :model="queryParams">
        <el-row>
          <el-col :span="6">
            <el-form-item prop="aaaa" label="">
              <Cascader change-on-select :data="organizationList" v-model="queryParams.aaaa" style="width: 100%;"
                placeholder="请选择机构" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="cccc" label="">
              <el-select v-model="queryParams.cccc" clearable filterable placeholder="续收组" style="width: 100%;">
                <el-option v-for="item in reagentCodeListZ" :key="item.key" :value="item.key">
                  {{ item.value }}-{{ item.key }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="eeee" label="">
              <el-select v-model="queryParams.eeee" clearable filterable placeholder="续收专员" style="width: 100%;">
                <el-option v-for="item in reagentCodeListM" :key="item.key" :value="item.key">
                  {{ item.value }}-{{ item.key }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select v-model="queryParams.bbbb" clearable filterable placeholder="任务类型" style="width: 100%;">
                <el-option
                  v-for="item in [{ label: '服务计划', value: '1' }, { label: '宣导计划', value: '2' }, { label: '业务操作', value: '3' }, { label: '其他', value: '4' }]"
                  :key="item.value" :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select v-model="queryParams.bbbb" clearable filterable placeholder="交次" style="width: 100%;">
                <el-option v-for="item in [{ value: '1', label: '1次' }, { value: '2', label: '2次' }]" :key="item.value"
                  :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select v-model="queryParams.bbbb" clearable filterable placeholder="渠道" style="width: 100%;">
                <el-option v-for="item in saleChannelList" :value="item.key" :key="item.key">{{ item.value }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select v-model="queryParams.bbbb" clearable filterable placeholder="子渠道" style="width: 100%;">
                <el-option v-for="item in saleChannelListC" :value="item.key" :key="item.key">{{ item.value }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select v-model="queryParams.bbbb" clearable filterable placeholder="收费预估" style="width: 100%;">
                <el-option v-for="item in estimatestateList" :value="item.key" :key="item.key">{{ item.value }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-input v-model="queryParams.bbbb" placeholder="投保人姓名" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-input v-model="queryParams.bbbb" placeholder="保单号" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="bbbb" label="">
              <el-select v-model="queryParams.bbbb" clearable filterable placeholder="质检状态" style="width: 100%;">
                <el-option v-for="item in [{ label: '待质检', value: '0' }, { label: '已质检', value: '1' }]" :key="item.value"
                  :value="item.value">
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row style="display: flex;align-items: center;">
              <el-col :span="11">
                <el-form-item prop="minFee">
                  <el-input placeholder="最低应收保费" v-model="queryParams.minFee" type="number"
                    @on-blur="decimalConversion(queryParams.minFee)" />
                </el-form-item>
              </el-col>
              <i-col :span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col :span="11">
                <el-form-item prop="maxFee">
                  <el-input placeholder="最高应收保费" v-model="queryParams.maxFee" type="number"
                    @on-blur="decimalConversion2(queryParams.maxFee)" />
                </el-form-item>
              </i-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <div style="display: inline-block;">
                <el-button type="primary" size="mini">查询
                </el-button>
                <el-button type="info" plain size="mini">重置
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Card>
    <Card style="margin-top: 20px;">
      <el-table :data="tableList" style="width: 100%;">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column width="140" label="保单号" prop="aaaa" align="center" />
        <el-table-column width="120" label="投保人" prop="bbbb" align="center" />
        <el-table-column label="应交日" prop="cccc" align="center" />
        <el-table-column width="110" label="应交次数" prop="dddd" align="center" />
        <el-table-column width="110" label="应交保费" prop="eeee" align="center" />
        <el-table-column width="120" label="续收专员" prop="ffff" align="center" />
        <el-table-column label="保单标志" prop="gggg" align="center" />
        <el-table-column label="工作状态" prop="hhhh" align="center" />
        <el-table-column label="质检状态" align="center" fixed="right">
          <template slot-scope="{row}">
            <span v-if="row.workState == '0'">
              <Button style="border-radius: 16px;background-color:rgb(255,141,26);color:#fff" size="small"
                @click="toDetail(row)">待质检</Button>
            </span>
            <span v-if="row.workState == '1'">
              <Button style="border-radius: 16px;background-color:rgb(67,207,124);color:#fff" size="small"
                @click="toDetail(row)">已质检</Button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="tableList.length" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </Card>
  </div>
</template>
<script>
import { getSelectListMixin } from "../../util/mixins/getSelectListMixin";
export default {
  name: "QualityControl",
  mixins: [getSelectListMixin],
  data() {
    return {
      queryParams: {},
      organizationList: [],
      ddddList: [{ key: "1", value: "全部" },
      { key: "2", value: "二次" },
      { key: "3", value: "三次" },
      { key: "4", value: "四次及以上" },],
      reagentCodeListZ: [{
        "value": "奚云峰组",
        "key": "100003"
      },
      {
        "value": "黄睿肃组",
        "key": "100004"
      },
      {
        "value": "虚拟组",
        "key": "100023"
      },
      {
        "value": "王sm组",
        "key": "100009"
      },],
      ggggList: [{
        "value": "已交",
        "key": "1"
      }, {
        "value": "未交",
        "key": "2"
      },],
      ffffList: [{
        "value": "类型1",
        "key": "1"
      }, {
        "value": "类型2",
        "key": "2"
      }, {
        "value": "类型3",
        "key": "3"
      },],
      saleChannelListC: [
        {
          "key": "01",
          "value": "直销业务",
          "childern": null
        },
        {
          "key": "50",
          "value": "移动展业",
          "childern": null
        },
        {
          "key": "00",
          "value": "其他",
          "childern": null
        }
      ],
      estimatestateList: [
        { key: "0", value: "可回收" },
        { key: "1", value: "收费困难" },
        { key: "2", value: "不可回收" },
        { key: "3", value: "不确定" }
      ],
      tableList: [{
        aaaa: '0000530316861888', bbbb: '阙N5', cccc: '2020-07-19',
        dddd: '4/10年交', eeee: '1200', ffff: '奚续收', workState: '1',
        gggg: '在职单', hhhh: '服务中', iiii: '20', jjjj: '1250', kkkk: '50', llll: '5', mmmm: '120',
      }, {
        aaaa: '0000535720271998', bbbb: '享九投', cccc: '2021-12-10',
        dddd: '1/10年交', eeee: '4500', ffff: '续期CC零一组一号', workState: '0',
        gggg: '孤儿单', hhhh: '服务中', iiii: '20', jjjj: '1870', kkkk: '14', llll: '100', mmmm: '120',
      }, {
        aaaa: '0000535520921998', bbbb: '享七投', cccc: '2022-12-15',
        dddd: '4/10年交', eeee: '5600', ffff: '王丹', workState: '1',
        gggg: '在职单', hhhh: '已完成', iiii: '20', jjjj: '1780', kkkk: '35', llll: '14', mmmm: '120',
      }, {
        aaaa: '0000535920591998', bbbb: '享十一投', cccc: '2022-12-15',
        dddd: '1/10年交', eeee: '4566', ffff: '王建', workState: '1',
        gggg: '孤儿单', hhhh: '已完成', iiii: '20', jjjj: '1990', kkkk: '15', llll: '16', mmmm: '120',
      }, {
        aaaa: '0000029521031998', bbbb: '齐洋洋', cccc: '2022-12-15',
        dddd: '4/10年交', eeee: '1200', ffff: '闫择强', workState: '0',
        gggg: '在职单', hhhh: '服务中', iiii: '20', jjjj: '1250', kkkk: '26', llll: '5', mmmm: '120',
      }, {
        aaaa: '0000539220051998', bbbb: '享二十投', cccc: '2020-07-19',
        dddd: '1/10年交', eeee: '5600', ffff: '宋泽宇', workState: '0',
        gggg: '在职单', hhhh: '已完成', iiii: '20', jjjj: '1780', kkkk: '18', llll: '14', mmmm: '120',
      }, {
        aaaa: '0000536820091998', bbbb: '呼叫二十四女', cccc: '2020-07-19',
        dddd: '1/10年交', eeee: '5600', ffff: '王一波', workState: '1',
        gggg: '在职单', hhhh: '已完成', iiii: '20', jjjj: '1780', kkkk: '35', llll: '14', mmmm: '120',
      }, {
        aaaa: '0000536120911998', bbbb: '享十四投', cccc: '2020-07-19',
        dddd: '1/10年交', eeee: '4500', ffff: '孙巨仑', workState: '0',
        gggg: '孤儿单', hhhh: '已完成', iiii: '20', jjjj: '1870', kkkk: '14', llll: '100', mmmm: '120',
      },],
      total: 4,
    }
  },
  created() { this.getAllOrganization() },
  methods: {
    getList() { },
    toDetail() {
      this.$router.push({
        name: "ServiceDetail",
      });
    },
    // 获取续期专员机构下拉框信息
    getAllOrganization() {
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
  }
}
</script>